<%@ page contentType="text/html;charset=UTF-8" language="java" import="java.util.*,java.sql.*,com.*"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="css/font.css">
    <link rel="stylesheet" href="css/xadmin.css">
     <link rel="stylesheet" href="ui/layui/css/layui.css">
     <script src="ui/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/xadmin.js"></script>
</head>
<body>
<script>
    layui.use('form', function(){
  var form = layui.form;
});
</script>
<%
	GetUserList gul=new GetUserList(); 
	ArrayList<User> userList = new ArrayList<User>();
	userList=gul.GetList();
	request.setAttribute("userList", userList); 
%>
<script>
var userList = []; 

<c:forEach items="${userList}" var="u">
    var obj = {
        type: "${u.type }",
        username: "${u.username }",
        password: "${u.password}"
    };
    userList.push(obj); // 将当前对象添加到数组中
</c:forEach>
</script>
<div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="">用户管理</a>
            <a href="">用户列表</a>
            <a>
              <cite>所有用户</cite></a>
          </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                   <form id="user-search" class="layui-form layui-col-space5">
    <div class="layui-inline layui-show-xs-block">
        <select name="level" id="search-level">
            <option value="管理员" selected>管理员</option>
            <option value="用户">用户</option>
        </select>
    </div>
    <div class="layui-inline layui-show-xs-block">
        <input type="text" name="username" placeholder="请输入用户名" autocomplete="off" class="layui-input" value=""/>
    </div>
    <div class="layui-inline layui-show-xs-block">
        <button class="layui-btn" lay-submit lay-filter="formDemo" id="search-btn"><i class="layui-icon">&#xe615;</i></button>
    </div>
</form>
                </div>
                <div class="layui-card-header">
                    <button class="layui-btn layui-btn-danger"  onclick="delall()"><i class="layui-icon"></i>全部删除</button>
                    <button class="layui-btn" onclick="xadmin.open('添加用户','reg.jsp',1200,600)"><i class="layui-icon"></i>添加</button>
                </div>
                <div class="layui-card-body layui-table-body layui-table-main" id="userTableBody">
				  <table class="layui-table layui-form">
    <thead>
        <tr>
            <th>
               	 用户编号
            </th>
            <th>用户类型</th>
            <th>用户名</th>
            <th>密码</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
            <!-- 使用JSTL标签库中的forEach循环生成表格的每一行 -->
            <c:forEach items="${userList}" var="u" varStatus="index">
                <tr>
                    <td>${index.index+1}</td>
                    <td>${u.type }</td>
                    <td>${u.username }</td>
                    <td>${u.password }</td>
                <td>
                    <!-- 判断当前行是否为管理员账号，并根据不同情况显示不同按钮 -->
                    <c:if test="${u.type == '管理员'}">
                        <button class="layui-btn layui-btn-sm layui-btn-disabled">修改</button>
                        <button class="layui-btn layui-btn-sm layui-btn-disabled">删除</button>
                    </c:if>
                    <c:if test="${u.type != '管理员'}">
                        <button class="layui-btn layui-btn-sm layui-btn-normal" onclick="location.href='upd.jsp?username=${u.username}'">修改</button>
                        <button class="layui-btn layui-btn-sm layui-btn-danger" onclick="askAndDel('${u.username}')">删除</button>
                    </c:if>
                </td>
           </tr>
            </c:forEach>
        </tbody>
    </table>
</div>
                <div class="layui-card-body ">
    <div class="page" id="pageButtons">
    </div>
</div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
// 获取表单元素和表格元素
var form = document.querySelector('form');
var table = document.querySelector('table');

// 监听表单提交事件
form.addEventListener('submit', function(event) {
  event.preventDefault();   // 阻止表单默认提交行为
  var levelSelect = this.elements.level;
  var usernameInput = this.elements.username;
  var levelValue = levelSelect.value;
  var usernameValue = usernameInput.value;

  // 遍历表格中的每一行，满足条件则显示，否则隐藏
  Array.from(table.querySelectorAll('tbody tr')).forEach(function(tr) {
    if ((levelValue === '' || tr.cells[1].textContent === levelValue) &&
        (usernameValue === '' || tr.cells[2].textContent.includes(usernameValue))) {
      tr.style.display = '';
    } else {
      tr.style.display = 'none';
    }
  });
});
</script>
<script>
// 获取表格tbody元素
var tableBody = document.getElementById("userTableBody");
// 获取分页按钮区域元素
var pageButtons = document.getElementById("pageButtons");

// 每页显示的行数
var pageSize = 8;

// 当前页码
var currentPage = 1;

// 计算总页数并生成分页按钮
function generatePageButtons() {
    // 获取所有表格行
    var rows = tableBody.querySelectorAll("tbody > tr");
    // 计算总页数
    var totalPage = Math.ceil(rows.length / pageSize);
    // 构建分页按钮HTML代码
    var html = "";
    for (var i = 1; i <= totalPage; i++) {
        html += "<a class='pageButton' href='javascript:void(0)' onclick='gotoPage("+i+")'>"+i+"</a>";
    }
    // 将HTML代码添加到页面中
    pageButtons.innerHTML = html;
}

// 跳转到某一页并更新分页按钮样式
function gotoPage(pageNumber) {
    // 更新当前页码
    currentPage = pageNumber;
    // 获取所有表格行
    var rows = tableBody.querySelectorAll("tbody > tr");
    // 显示对应页码的行，隐藏其他行
    for (var i = 0; i < rows.length; i++) {
        if (i >= (currentPage-1)*pageSize && i < currentPage*pageSize) {
            rows[i].style.display = "table-row";
        } else {
            rows[i].style.display = "none";
        }
    }
    // 更新分页按钮样式
    var buttons = pageButtons.querySelectorAll(".pageButton");
    for (var i = 0; i < buttons.length; i++) {
        if (i == (currentPage - 1)) {
            buttons[i].classList.add("current");
        } else {
            buttons[i].classList.remove("current");
        }
    }
}

// 初始化页面
generatePageButtons();
gotoPage(currentPage);
</script>
	<script>
	
	    // 弹出询问框，用于删除操作
	    function delall() {
		  // 弹出确认框
		  if (confirm("确定删除全部用户信息吗？")) {
		    // 如果用户点击“确定”按钮，执行以下语句
		    window.location.href = "DelAllServlet"; // 跳转到 DelAllServlet
		  } else {
		    // 如果用户点击“取消”按钮，执行以下语句
		    return false; // 取消删除动作
		  }
		}
	    function askAndDel(username) {
	        if (confirm("确定删除用户名为："+username+"的账号？")) {
	            location.href = "DelServlet?username=" + username;
	        } else {
	            // 点击取消按钮时的处理逻辑，一般情况下不需要进行任何操作
	        }
	    }
	
	    // 弹出提示框，禁止管理员账号进行修改和删除操作
	    function alertAdmin() {
	        alert("管理员账号不能修改或删除！");
	    }
	</script>
</html>
